<template>
  <div class="box">
    <h1>组件间通信7: $ref & $parent</h1>

    <p>BABA有存款: {{money}}</p>
    <button @click="borrowMoney1(100)">找小明借钱100</button><br>
    <button @click="borrowMoney2(150)">找小红借钱150</button><br>

    <br>
    <Son ref="sonRef"/>

    <br>
    <Daughter ref="dauRef"/>

  </div>
</template>

<script lang="ts" setup>
  import Son from './Son.vue'
  import Daughter from './Daughter.vue'
  import { ref } from 'vue';


  /* 
  类型别名: 

  let n1 = 'abc'
  let n2: typeof n1

  typeof在js中: 得到变量/数据的类型名称  'string' / 'number' / 'object'
  typeof在ts中: 得到变量/数据的类型

  function fn (a: string): string {

    return : 'abc'
  }
  js: typeof fn   ==> 'function'
  ts: typeof fn   ==>  (a: string) => string

  console.log(typeof fn)  在ts中如果输出typeof的结果就是js的typeof

  function Person (name: string, age: age): Person {
    this.name = name;
    this.age = age
  }

  typeof Person
  InstanceType<typeof Person>   {name: string, age: number}
  */
  
  const money = ref(1000)
  const sonRef = ref<InstanceType<typeof Son> | null>(null)
  const dauRef = ref<InstanceType<typeof Daughter> | null>(null)

  const borrowMoney1 = (num: number) => {
    sonRef.value?.borrowMoney(num)
    money.value += num
  }

  const borrowMoney2 = (num: number) => {
    dauRef.value?.borrowMoney(num)
    money.value += num
  }

  const receiveMoney = (num: number) => {
    money.value += num
  }

  defineExpose({
    receiveMoney
  })

</script>

<style>

</style>
